<template>
  <a-list
    :bordered="bordered"
    :data-source="dataSource"
    :footer="footer"
    :grid="grid"
    :header="header"
    :item-layout="itemLayout"
    :loading="loading"
    :load-more="loadMore"
    :locale="locale"
    :pagination="pagination"
    :render-item="renderItem"
    :row-key="rowKey"
    :size="size"
    :split="split"
  >
    <template v-if="$slots.renderItem" #renderItem="{item, index}">
      <slot name="renderItem" :item="item" :index="index" />
    </template>
    <template v-if="$slots.footer" #footer>
      <slot name="footer" />
    </template>
    <template v-if="$slots.header" #header>
      <slot name="header" />
    </template>
    <template v-if="$slots.loadMore" #loadMore>
      <slot name="loadMore" />
    </template>
    <slot />
  </a-list>
</template>

<script>
import { defineComponent } from 'vue'
import { List } from 'ant-design-vue'
export default defineComponent({
  name: 'ZList',
  components: {
    AList: List
  },
  props: {
    bordered: {
      type: Boolean,
      default: false
    },
    dataSource: {
      type: Array,
      default: undefined
    },
    footer: {
      type: String,
      default: undefined
    },
    grid: {
      type: Object,
      default: undefined
    },
    header: {
      type: String,
      default: undefined
    },
    itemLayout: {
      type: String,
      default: undefined
    },
    loading: {
      type: [Object, Boolean],
      default: false
    },
    loadMore: {
      type: String,
      default: undefined
    },
    locale: {
      type: Object,
      default: undefined
    },
    pagination: {
      type: [Object, Boolean],
      default: false
    },
    renderItem: {
      type: Function,
      default: undefined
    },
    rowKey: {
      type: [Function, String, Number],
      default: undefined
    },
    size: {
      type: String,
      default: 'default'
    },
    split: {
      type: Boolean,
      default: true
    }
  }
})
</script>
